<template>
  <div class="plan-detail">
    <div class="title">
      <div class="block"></div>
      <div class="word">订单详情</div>
      <div class="button">
        <el-button class="el-button">刷新</el-button>
        <el-button class="el-button">关闭</el-button>
      </div>
    </div>
    <div>
      <orderstatus>
        <template v-slot:status>
          {{statusName}} 
        </template>
      </orderstatus>
    </div>
    <div class="order-records">
      <div>
        <info :orderId="orderId">
          <template>
            <el-table-column prop="" label=""></el-table-column>
            <el-table-column prop="" label=""> </el-table-column>
          </template>
        </info>
      </div>
 
      <div class="head">
        <img class="img" src="../../../../assets/index/tag.png" alt="" />
        学生意向留学信息
      </div>
      <div class="essential-information">
        <el-table
          class="el-table"
          ref="multipleTable"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="paymentnumber" label="学校"> </el-table-column>
          <el-table-column prop="payment" label="学历"> </el-table-column>
          <el-table-column prop="amount" label="希望就读专业">
          </el-table-column>
          <el-table-column prop="paymenttime" label="入学阶段">
          </el-table-column>
          <el-table-column prop="amount" label="是否需要顾问咨询">
          </el-table-column>
        </el-table> 
      </div>
      <div class="head">
        <img class="img" src="../../../../assets/index/tag.png" alt="" />
        推荐方案信息
      </div>
      <div class="essential-information">
        <el-table
          class="el-table"
          ref="multipleTable"
          :data="tableData2"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="school" label="所属学校"> </el-table-column>
          <el-table-column prop="chinesesubjectname" label="专业中文名称">
          </el-table-column>
          <el-table-column prop="englishsubjectname" label="专业英文名称">
          </el-table-column>
          <el-table-column prop="educational" label="学制"> </el-table-column>
          <el-table-column prop="tuition" label="学费"> </el-table-column>
          <el-table-column prop="proportion" label="国际生比例">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import orderstatus from '../../../../component/orderstatus/orderstatus.vue'
import info from '../../../../component/base-payment-info/base-payment-info.vue'
import { getOrderByid } from '../../../../api/index'

export default {
  name: 'planDetail',

  components: {
    orderstatus, //订单状态
    info, //基本信息和支付信息
  },

  data() {
    return {
      test: 22,
      orderId: '',//订单编号
      baseinfo: {},
      statusName: '',//订单状态
      tableData: [
        {
          ordernumber: '201707196398345', //订单编号
          time: '2017-07-19 14:48:38', //创建时间
          account: '180000000000', //用户账号
          name: '张三', //姓名
          phonenumber: '1178919292', //手机号
          wechat: 'jinx11', //微信号
          email: '132432454@gmail.com', //邮箱
          payment: '微信', //支付方式
          source: '微信小程序订单', //订单来源
          style: '方案订单', //订单类型
          paymentnumber: '567879898789', //支付流水号
          amount: '￥79.00', //支付金额
          paymenttime: '2021-05-08 12:37:33', //支付时间
          school: '浙江大学', //学校
        },
      ],
      tableData2: [
        {
          id: '1000001', //编号
          school: '布里斯托大学', //所属学校
          chinesesubjectname: '布里斯托大学', //专业中文名称
          englishsubjectname: 'Medical Microbiology，BSc（C521）', //专业英文名称
          educational: '学制', //两年
          tuition: '￡13,000-￡38,00', //学费
          proportion: '20%', //国际生比例
          operation: 'operation', //操作
        },
        {
          id: '1000001', //编号
          school: '布里斯托大学', //所属学校
          chinesesubjectname: '布里斯托大学', //专业中文名称
          englishsubjectname: 'Medical Microbiology，BSc（C521）', //专业英文名称
          educational: '学制', //两年
          tuition: '￡13,000-￡38,00', //学费
          proportion: '20%', //国际生比例
          operation: 'operation', //操作
        },
      ],
    }
  },

  mounted() {
    this.$emit('routeName', "planDetail");
    if (window.sessionStorage.getItem('orderId')) {
      this.orderId = window.sessionStorage.getItem('orderId')
      console.log(this.$route.params.val);
    }
    this.statusName = this.$route.params.val.statusName
  },

  methods: {},
}
</script>

<style scoped>
.title {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  display: flex;
  width: 100px;
  height: 40px;
  margin-top: 5px;
  margin-left: 75%;
}
.img {
  width: 15px;
  height: 15px;
  margin-top: 15px;
}
.order-records {
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-left: 20px;
  background-color: white;
}
.head {
  padding-top: 20px;
  padding-left: 20px;
  color: #666666;
  font-size: 18px;
}
.essential-information {
  margin-top: 20px;
  margin-left: 20px;
}
.el-button {
  margin-right: 10px;
}
</style>
